<template>
  <div class="list">
    <Content title="美食">
      <!-- 
        在组件的标签内部书写的内容就是插入给组件内部的插槽内容
       -->
      <template v-slot:content>
        <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />
      </template>
      <!-- 
        如果在传入插槽结构的时候，没有使用v-slot，则当前结构默认寻找匿名插槽（默认插槽）
       -->
      <template>
        <div>
          <p>美食1</p>
          <p>美食2</p>
          <p>美食3</p>
        </div>
      </template>
    </Content>
    <Content title="游戏">
      <template #content>
        <ul>
          <li>LOL1</li>
          <li>LOL2</li>
          <li>LOL3</li>
          <li>LOL4</li>
        </ul>
      </template>
    </Content>
    <Content title="电影">
      <template #content>
        <ol>
          <li>哈哈哈1</li>
          <li>哈哈哈2</li>
          <li>哈哈哈3</li>
          <li>哈哈哈4</li>
        </ol>
      </template>
    </Content>
  </div>
</template>
<script>
import Content from './components/Content.vue';
export default {
  name: 'App',
  components: {
    Content,
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
